<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>疯
        </title>
        <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/layout.css"media="only screen and (max-width:768px)"/>
        <style media="screen">
            .drop-down a:nth-child(1)::before{
                content: "";
                width: 0;
                height: 0;
                overflow: hidden;
                border: 8px solid transparent;
                border-bottom-color: #79c2cc;
                position: absolute;
                top: -16px;
                left: 50%;
                margin-left: -8px;
            }
            .drop-down {
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -70px;
                width: 140px;
                height: 33px;
                line-height: 33px;
                border-radius: 4px;
                background-color: #79c2cc;
                text-align: center;
                font-size: 12px;
                display: none;
            }
            .drop-down a {
                text-decoration: none;
                color: #777;
            }
            .drop-down a:hover {
                color: #fff;
            }
            .nav li a:nth-child(2) {
                position: relative;
            }
            .nav li:nth-child(2):hover .horizon-center {
                display: block;
            }
            .horizon-center {
                width: 150px;
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -75px;
                display: none;
                z-index: 1;
            }
            .nav li a:nth-child(6) {
                position: relative;
            }
            .nav li:nth-child(6):hover .drop-down{
                display: block;
            }
            .center {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 100;
                transform: translate3d(-50%, -50%, 0);
            }
            #section1 img {
                width: 400px;
                margin-top: 129px;
                margin-bottom: 180px;
            }
            .section {
                margin: 0 auto;
                border-top: 1px solid #e0e0e0;
                text-align: center;
            }
            #myCarousel2 .carousel-inner img {
                margin: 0 auto;
                width: 20%;
            }
            #myCarousel2 {
                margin-bottom: 60px;
            }
            #myCarousel2 .carousel-control {
                background: none;
            }
            #myCarousel2 .carousel-inner {
                margin-top: 70px;

            }
            #myCarousel2 .carousel-indicators {
                bottom: -45px;
            }
            #myCarousel2 .carousel-indicators li {
                border: 1px solid #aaa;
            }
            #myCarousel2 .carousel-indicators li.active {
                background: #999;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="row">
                    <div class="navbar-header col-lg-6 col-md-4">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand " href="javascript:void(0)"><img src="imgs/logo.png" alt="" /></a>
                    </div>
                    <div class="collapse navbar-collapse col-lg-6 col-md-8" id="example-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#myCarousel1">关于疯咖</a></li>
                            <li>
                                <a href="javascript:void(0)">扫码关注</a>
                                <img class="horizon-center" src="imgs/code.png" alt="">
                            </li>
                            <li><a href="#section3">点单流程</a></li>
                            <li><a href="#myCarousel2">产品</a></li>
                            <li><a href="#section5">活动</a></li>
                            <li>
                                <a href="javascript:void(0)">加入</a>
                                <ul class="drop-down" id="join">
                                    <a href="javascript:void(0)">加盟合作&nbsp;&nbsp;&nbsp;</a>
                                    <a href="javascript:void(0)">加入我们</a>
                                </ul>
                            </li>
                            <li><a href="javascript:void(0)">联系</a></li>
                      </ul>
                   </div>
                </div>

            </div>
        </nav>

        <div id="myCarousel1" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel1" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="imgs/myCarousel1.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img src="imgs/myCarousel2.jpg" alt="Second slide">
                </div>
            </div>
            <a class="carousel-control left" href="#myCarousel1" data-slide="prev">
                <img class="center" src="imgs/glarrow.png" alt="" />
            </a>
            <a class="carousel-control right" href="#myCarousel1" data-slide="next">
                <img class="center" src="imgs/grarrow.png" alt="" />
            </a>
        </div>
        <div id="section1" class="section">
            <img class="" src=" imgs/section1_img.png" alt="" />
        </div>

        <div id="section2" class="section">
            <div id="myCarousel2" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel2" data-slide-to="1"></li>
                    <li data-target="#myCarousel2" data-slide-to="2"></li>
                    <li data-target="#myCarousel2" data-slide-to="3"></li>
                    <li data-target="#myCarousel2" data-slide-to="4"></li>
                    <li data-target="#myCarousel2" data-slide-to="5"></li>
                    <li data-target="#myCarousel2" data-slide-to="6"></li>
                    <li data-target="#myCarousel2" data-slide-to="7"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="imgs/coffee1.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/coffee2.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                       <img src="imgs/coffee3.jpg" alt="Third slide">
                    </div>
                    <div class="item">
                        <img src="imgs/coffee4.jpg" alt="Third slide">
                    </div>
                    <div class="item">
                        <img src="imgs/coffee5.jpg" alt="Third slide">
                    </div>
                    <div class="item">
                        <img src="imgs/coffee6.jpg" alt="Third slide">
                    </div>
                    <div class="item">
                        <img src="imgs/coffee7.jpg" alt="Third slide">
                    </div>
                    <div class="item">
                        <img src="imgs/coffee8.jpg" alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control left" href="#myCarousel2" data-slide="prev">
                    <img class="center" src="imgs/glarrow.png" alt="" />
                </a>
                <a class="carousel-control right" href="#myCarousel2" data-slide="next">
                    <img class="center" src="imgs/grarrow.png" alt="" />
                </a>
            </div>
    </body>
    <script src="js/jquery-2.2.3.min.js" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.sky.carousel-1.0.min.js"></script>

</html>
